import logo from '@/assets/4.jpg';
import logo2 from '@/assets/5.jpg';
import styles from '@/componets/zujian/CardList.module.scss'; // 导入CSS模块
import { EyeOutlined, StarFilled, StarOutlined } from '@ant-design/icons';
import { Avatar, Card, Tag } from "antd";
import React, { useState } from "react";

interface CardListProps {
    app: {
        name: string;
        description: string;
        tags: string[];
        collection: number;
        views: string;
    };
}

const CardList: React.FC<CardListProps> = ({ app }) => {
    const [collected, setCollected] = useState(false);
    return (
        <Card className={styles.componetCard} style={{ width: '31.25rem', height: '17.1875rem', marginBottom: '0.25rem' }}>
            <div className={styles.componetCardAvatar}>
                <Avatar shape="square" size={56} src={logo} alt='app logo' />
                <div className={styles.componetCardHeadContent}>
                    <h2>{app.name}</h2>
                </div>
                <div className={styles.divider}></div>
            </div>
            <div className={styles.middle}>
                <p style={{ color: '#81838f', fontSize: '1.125rem',marginTop: '0px'}}>{app.description}</p>
                <div className={styles.middleTag}>
                    {app.tags.map(tag => (
                        <Tag key={tag} style={{ fontSize: '1rem', padding: '0.25rem 0.25rem', backgroundColor: 'white', border: '0.0625rem solid #cdcdcd' }}>{tag}</Tag>
                    ))}
                </div>
            </div>
            <div className={styles.footer}>
                <div className={styles.footerStats}>
                    <span style={{ display: 'inline-flex', color: '#81838f', fontSize: '1rem' }}>
                        <Avatar src={logo2} style={{ width: '1.375rem', height: '1.375rem', marginRight: '0.3125rem', marginTop: '0.0625rem' }} />Baidu
                    </span>
                    <span onClick={() => setCollected(!collected)} style={{ display: 'inline-flex', alignItems: 'center', marginRight: '1.875rem', color: '#81838f', fontSize: '1.125rem' }}>
                        {collected ? <StarFilled style={{ color: 'gold', fontSize: '1.125rem', marginRight: '0.125rem', marginLeft: '1.5625rem' }} /> : <StarOutlined style={{ fontSize: '1.125rem', marginRight: '0.125rem', marginLeft: '1.5625rem' }} />} {app.collection}
                    </span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', color: '#81838f', fontSize: '1.125rem' }}>
                        <EyeOutlined style={{ fontSize: '1.125rem', marginRight: '0.125rem', marginLeft: '0rem' }} /> {app.views}
                    </span>
                </div>
                <button className={styles.startChatButton}>立即使用</button>
            </div>
        </Card>
    );
};

export default CardList;
